<template>
  <div class="safeDistance">
    <u-navbar bgColor="transparent">
      <template #left></template>
      <template #center>我的</template>
    </u-navbar>
    <div style="width: 100%; height: 160rpx"></div>
    <div v-if="!showModal" class="" style="padding: 0 30rpx">
      <div
        class="bgf mt80r rel"
        style="height: 220rpx; padding: 10rpx 25rpx; background-color: #eff5fe"
      >
        <div class="abs" style="top: -20rpx; left: 40rpx">
          <u-avatar :src="src" size="60"></u-avatar>
        </div>
        <div class="f ac xb" style="margin-left: 150rpx">
          <div class="f cn">
            <div class="b fs30r">{{ userInfo.nickName || "姓名" }}</div>
            <div class="g9 fs26r">{{ userInfo.phoneNumber || "手机号" }}</div>
          </div>
          <div @click="goPersonalInfo">
            <u-icon bold name="more-dot-fill"></u-icon>
          </div>
        </div>
        <div class="ml20r mt40r">
          <div class="f ac b">
            <div class="fs30r mr20r" style="color: #a2a2a2">学号</div>
            <div class="fs32r">{{ "xxxxxxxxxxxxxxx" }}</div>
          </div>
          <!--          <div class="f  ac b">-->
          <!--            <div class="fs30r " style="color: #a2a2a2">身份证</div>-->
          <!--            <div class="fs32r">{{ 'xxxxxxxxxxxxxxxxxxxx' }}</div>-->
          <!--          </div>-->
          <div class="f ac b">
            <div class="fs30r mr20r" style="color: #a2a2a2">学校</div>
            <div class="fs32r">{{ "xxxxxxxxxxxxxxxxxxxx" }}</div>
          </div>
        </div>
      </div>
      <div class="mt40r task" style="padding: 0 30rpx; height: 800rpx">
        <div class="f ac xb">
          <div class="b f fs32r mt20r">
            <div>常用功能</div>
          </div>
          <!--          <div class="">-->
          <!--            <image-->
          <!--                src="@/static/mine/yyf_icon.png"-->
          <!--                style="width: 74rpx; height: 92rpx"-->
          <!--            />-->
          <!--          </div>-->
        </div>

        <div class="f xb ac">
          <div class="f ac">
            <image
              src="@/static/mine/my_xcx_icon.png"
              style="width: 72rpx; height: 72rpx"
            />
            <div class="b fs28r">小程序</div>
          </div>
          <div class="f ac" @click="share">
            <u-button
              hoverStartTime="999999"
              customStyle="background-color: unset;border-color: transparent;color: #a2a2a2;padding: 0;"
              open-type="share"
              class="mr10r fs25r"
              style="color: #a2a2a2"
            >
              分享小程序
            </u-button>
            <u-icon name="arrow-right" color="#A2A2A2" size="16"></u-icon>
          </div>
        </div>
        <div
          class="mt20r mb20r"
          style="background: #f6f6f6; height: 1px; width: 100%"
        ></div>
      </div>
    </div>
    <!--    <u-tabbar :value="value1" fixed :placeholder="false" safeAreaInsetBottom>-->
    <!--      <u-tabbar-item-->
    <!--          @click="goHome"-->
    <!--          text="首页"-->
    <!--          icon="home"-->
    <!--          name="home"-->
    <!--      ></u-tabbar-item>-->
    <!--      <u-tabbar-item text="我的" icon="account" name="account"></u-tabbar-item>-->
    <!--    </u-tabbar>-->
    <u-modal
      :show="showModal"
      title="提示"
      :content="content"
      @confirm="confirm"
    ></u-modal>
  </div>
</template>

<script>
// import { getMineInfo, getTaskTotal, shareApp } from "@/api/mine";
// import {
//   dailyTaskShare,
//   getCredit,
//   getMyDailyTask,
//   getMyInfo,
// } from "@/api/business";

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  name: "",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      dailyTaskList: {},
      src: "",
      value1: "account",
      userInfo: {
        phoneNumber: "",
        name: "",
        nickName: "",
      },
      taskTotal: 0,
      showModal: false,
      content: "当前分享页面需要登录后查看！",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onShareAppMessage(res) {
    if (res.from === "button") {
      // 来自页面内分享按钮
      console.log(res.target);
    }
    // return {
    //   path: "/pages/login/indxe",
    // };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async onLoad() {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    // if (!this.$store.state.user.token||!this.$store.state.user.userId)  return  this.showModal=true
  },
  onShow() {
    // if (!this.$store.state.user.token||!this.$store.state.user.userId) return
    // this.getuserInfo();
    // this.getDailyTask();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    confirm() {
      uni.redirectTo({
        url: "/pages/login/index",
      });
    },
    async getDailyTask() {
      let { code, msg, data } = await getMyDailyTask();
      if (code === 200) {
        this.handleDailyTaskData(data);
      } else {
        uni.showToast({
          title: msg,
        });
      }
      let res = await getTaskTotal();
      this.taskTotal = res.data;
    },
    handleDailyTaskData(data) {
      if (data.length) {
        console.log(JSON.stringify(data));
        this.dailyTaskList = data.reduce((acc, cur) => {
          acc[cur.taskCode] = cur.isFinish;
          return acc;
        }, {});
      } else {
        this.dailyTaskList = {};
      }
      console.log(this.dailyTaskList);
    },

    async getuserInfo() {
      const res = await getMineInfo();
      const info = {
        phoneNumber: this.$store.state.user.phoneNumber,
        name: this.$store.state.user.name,
        nickName: this.$store.state.user.nickName,
      };
      this.userInfo = { ...info, ...res };
    },
    goPersonalInfo() {
      uni.navigateTo({
        url: "/pages/personalInfo/index",
      });
    },
    goCreditScoreRecord() {
      uni.navigateTo({
        url:
          "/pages/creditScoreRecord/index?item=" +
          encodeURIComponent(JSON.stringify(this.userInfo)),
      });
    },
    goHome() {
      // uni.redirectTo({
      //   url: "/pages/personal/index",
      // });
    },
    share() {
      shareApp();
    },
  },
};
</script>
<style scoped>
.task {
  background: linear-gradient(
    180deg,
    #dbe8fd,
    #ffffff,
    #ffffff,
    #ffffff,
    #ffffff
  );
}

::v-deep .u-icon__icon {
  font-size: 40rpx !important;
  line-height: 40rpx !important;
}
</style>

<style>
page {
  background: linear-gradient(135deg, #b7c6eb, #f6f9ff);
}
</style>
/* background: url(../../static/mine/my_bg.png); */
